<!--  待确认订单页面-->
<template>
    <div>
      <div style="width: 1200px;margin:  0 auto;margin-bottom: 50PX;margin-top: 50PX">
        <el-steps :active="1">
          <el-step title="提交订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="支付订单" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="商家发货" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="确认发货" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
          <el-step title="完成" description="2023-07-19 15:43:23" icon="el-icon-s-order"></el-step>
        </el-steps>
      </div>
      <br>
      <div style="width: 1500px;margin:  0 auto; border: 1px solid #dddddd;padding: 10px">
        <div style="background-color: #dddddd;height: 80px;font-size: 18px;color: red;
        line-height: 80px;">
          <i style="margin-left: 50px" class="el-icon-collection-tag"></i>
          <span style="margin-left: 5px" >当前订单状态：待付款 </span>
          <el-button type="text" @click="dialogFormVisible = true"
          style="font-size: 18px;margin-left: 800px">取消订单</el-button>
          <el-dialog title="订单取消" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="取消原因" :label-width="formLabelWidth" prop="desc">
                <el-input  v-model="form.reason" autocomplete="off"  type="textarea"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleClick">确 定</el-button>
            </div>
          </el-dialog>
          <el-button size="mini"    style="margin-left: 50px;font-size: 18px" type="primary" @click="pay" >订单确认及支付</el-button>
<!--          todo  如果支付失败则不改变状态   没有加判断语句-->
<!--          <el-button type="text" style="margin-left: 50px;font-size: 18px"  @click="confirmOrder">订单确认</el-button>-->
<!--          <el-button style="margin-left: 50px" icon="el-icon-arrow-left"
                     size="mini"
                     @click="goBack">返回</el-button>-->
        </div>

        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">基本信息</i>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="订单编号">{{order.orderId}}</el-descriptions-item>
            <el-descriptions-item label="下单用户">18100000000</el-descriptions-item>
            <el-descriptions-item label="支付方式" :span="2">未支付</el-descriptions-item>
            <el-descriptions-item label="物流单号" >未发货</el-descriptions-item>
          </el-descriptions>
        </div>

        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">供货人信息</i>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="供货方">{{order.userName}}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{order.userPhone}}</el-descriptions-item>
            <el-descriptions-item label="供货方地址" :span="2">未支付</el-descriptions-item>
          </el-descriptions>
        </div>

        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">商品信息</i>
          <template>
            <el-table
                :data="tableData3"
                :span-method="arraySpanMethod"
                border
                show-summary
                style="width: 100%">
              <el-table-column
                  prop="picture"
                  label="商品图片"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="goodsName"
                  label="商品名称"
                  width="180">
              </el-table-column>
              <el-table-column
                prop="goodsPrice"
                label="商品单价">
            </el-table-column>
              <el-table-column
                  prop="goodsNumber"
                  label="商品数量">
              </el-table-column>
              <el-table-column
                  prop="goodsTotalPrice"
                  label="商品总价">
              </el-table-column>
              <!-- 合计行插槽 -->
              <template v-slot:footer>
                <el-table-column >
                  <template slot-scope="scope" >
                    合计：{{ getTotal }}
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>


        </div>

        <div style="margin:80PX 0">
          <i style="margin-left: 0px;margin-bottom: 20PX" class="el-icon-collection-tag">操作信息</i>
          <template>
            <el-table
                :data="tableData4"
                border
                style="width: 100%">
              <el-table-column
                  prop="operator"
                  label="操作者"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="modificationTime"
                  label="修改时间"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="orderStatus"
                  label="订单状态">
              </el-table-column>
              <el-table-column
                  prop="paymentstatus"
                  label="付款状态">
              </el-table-column>
              <el-table-column
                  prop="shipmentStatus"
                  label="发货状态">
              </el-table-column>
              <el-table-column
                  prop="notes"
                  label="备注">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <br>
      </div>
    </div>

</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      order: [] ,// 存储后端返回的数据
      tableData3: [
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,
        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,

        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,

        },
        {
          picture: '2016-05-02',
          goodsName: '王小虎',
          goodsPrice: '上海市普陀区金沙江路 1518 弄',
          goodsNumber: '付款状态',
          goodsTotalPrice: 1000,
        }],
      tableData4: [
        {
          operator: '2016-05-02',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1518 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

      },
        {
          operator: '2016-05-04',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1517 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

      },
        {
          operator: '2016-05-01',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1519 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

      },
        {
          operator: '2016-05-03',
          modificationTime: '王小虎',
          orderStatus: '上海市普陀区金沙江路 1516 弄',
          paymentstatus: '付款状态',
          shipmentStatus: '发货状态',
          notes: '备注',

      }],

      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        reason: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },

  //todo 修改最后一行合并的代码  合并单元格
  methods: {
    handleClick(){
      this.dialogFormVisible = false
      let url = 'http://localhost:29182//hotel/order/updateGoodsOrderStatusCancel?orderStatus=5'+"&id=" + this.order.id+'&orderId='+this.order.orderId+'&reason='+this.form.reason;
      console.log('url = ' + url);
      axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '订单取消成功！',
            type: 'success'
          });}
      })
    },
    pay() {
      window.open("http://localhost:29182/alipay/pay?subject=" + this.order.userName +"&id=" + this.order.id+"&outTradeNo=" + this.order.orderId  + "&totalAmount=" + this.order.orderAmount)
      this.$message.success("请求支付宝成功")
      this.handleUpdate();
    },
    //更新订单状态
    handleUpdate(){
      let url = 'http://localhost:29182//hotel/order/updateGoodsOrderStatus?orderStatus=1'+'&id='+this.order.id;
      console.log('url = ' + url);
      axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '订单确认成功！',
            type: 'success'
          });}
      })
    },
   /* goBack() {
      // 使用路由跳转到另一个页面
      this.$router.push('/admin/order/goods')
    },*/
  // 订单确认
    confirmOrder(){
      this.$confirm('是否确认该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleUpdate();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认'
        });
      });
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

  computed: {
    getTotal() {
      let total = 0;
      this.tableData.forEach(item => {
        total += item.goodsTotalPrice; // 假设最后一列的数据字段为lastColumnData
      });
      return total;
    }
  }
  },
  mounted() {
    if (this.$route.query.order) {
      this.order = JSON.parse(this.$route.query.order);
    }
  }
}

</script>
